<template>
  <div id="ipad" v-if="data">
    <div class="big">
      <div class="f">
        <div class="center">
          <div>
            <p>
              为高校生活购买 iPad，以 Apple 教育优惠节省更多◊，另有 AirPods
              搭配其中◊◊。 立即选购>
            </p>
          </div>
        </div>
      </div>
      <div class="f1">
        <swiper
          ref="swiper"
          @mouseover.native="stopPlay"
          @mouseout.native="startPlay"
          class="swiper"
          :options="swiperOption"
          v-if="data"
        >
          <swiper-slide class="swiper-slide-first">
            <div class="swiper-first">
              <img :src="data.img1" />
              <div class="text">
                <h2>iPad+Apple Pencil</h2>
                <p class="p1">手写笔记秀</p>
                <div>
                  <p>点击</p>
                  <img
                    :src="data.img32"
                    width="19.6px"
                    height="15px"
                    style="display: block"
                  />
                  <p>来观看</p>
                </div>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide v-for="img in data.imgsw" :key="img.sid">
            <img :src="img.imgs" @click="showMask(img.sid)" />
          </swiper-slide>
          <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
        </swiper>
      </div>

      <!-- ------------------------------遮罩层-------------------- -->
      <div class="mask">
        <div id="mask1">
          <div>
            <img id="maskImg" src="" @click="closeMask" />
          </div>
        </div>
      </div>
      <!-------------------------------------------------------二楼结构-------------------------------------------->

      <div class="f2">
        <div class="center">
          <div class="box">
            <div class="text">
              <p>新款</p>
              <div>
                <span>iPad</span>
                <img :src="data.img34" />
              </div>
              <p class="p1">轻,靓,重量级。</p>
              <P class="p2">RMB 4399 起</P>
              <router-link class="btn" to="/ipadAir">购买 </router-link>
              <router-link to="/ipadAir">进一步了解 > </router-link>
            </div>
            <div>
              <img :src="data.img10" />
            </div>
          </div>
        </div>
      </div>
      <!-- ------------------------------------------------三楼结构----------------------------------------------------------- -->
      <div class="f3">
        <div class="center">
          <div class="box">
            <div class="img">
              <img :src="data.img11" />
            </div>
            <div class="text">
              <span>iPad Pro</span>
              <p class="p1">终极iPad体验</p>
              <P class="p2">RMB 6199 起</P>
              <router-link class="btn" to="/ipadPro">购买 </router-link>
              <router-link to="/ipadPro">进一步了解 > </router-link>
            </div>
          </div>
        </div>
      </div>
      <!-- --------------------------------------------------四楼结构---------------------------------------------------- -->
      <div class="f4">
        <div class="center">
          <div class="box">
            <div class="text">
              <span>iPad</span>
              <p class="p1">特有本事特超值</p>
              <P class="p2">RMB 2499 起</P>
              <router-link class="btn" to="/ipad10-2">购买 </router-link>
              <router-link to="/ipad10-2">进一步了解 > </router-link>
            </div>
            <div>
              <img :src="data.img12" />
            </div>
          </div>
        </div>
      </div>
      <!----------------------------------------------------------------- 五楼结构 ----------------------------------------------->
      <div class="f5">
        <div class="center">
          <div class="box">
            <div>
              <img :src="data.img13" />
            </div>
            <div class="text">
              <div>
                <span>iPad</span>
                <img :src="data.img27" />
              </div>
              <p class="p1">小写的大</p>
              <P class="p2">RMB 3799 起</P>
              <router-link class="btn" to="/ipadMini">购买 </router-link>
              <router-link to="/ipadMini">进一步了解 > </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- ---------------------------小图区域结构设置----------------------------------------------- -->
    <div class="small">
      <!-- ---------------------------小图区域一楼结构------------------------------------------- -->
      <div class="f1 gongxiang">
        <div class="center">
          <div class="f1-1">
            <div class="box1">
              <p>看看哪款iPad适合你</p>
            </div>
            <ipad-zu />
            <div class="box3">
              <a href="#">比较各款 iPad 机型 > </a>
              <a href="#">选购 iPad > </a>
            </div>
          </div>
        </div>
      </div>
      <!-- ----------------------------小图区域二楼结构----------------------------------------------- -->
      <div class="f2">
        <div class="center">
          <div class="box">
            <div class="text">
              <p>为高校生活添装备</p>
              <p>以教育优惠购买 iPad</p>
              <p>可省更多◊</p>
              <p>另有 AirPods 搭配其中◊◊</p>
              <a href="#">立即选购 > </a>
            </div>
            <div class="img">
              <img :src="data.img14" />
            </div>
          </div>
        </div>
      </div>
      <!-- -----------------------------------小图区域三楼结构---------------------------------------- -->
      <div class="f3">
        <div class="center">
          <div class="box">
            <div class="img">
              <img :src="data.img15" />
            </div>
            <div class="text">
              <h2>用你现有的 iPad 来换购，享受折抵优惠。</h2>
              <p>
                通过 Apple Trade In 换购计划，你可以用符合条件的 iPad
                来换购，享受折抵优惠。这样一来，你受益，地球也受益3。
              </p>
              <a href="#">进一步了解 > </a>
            </div>
          </div>
        </div>
      </div>
      <!-- -----------------------------------小图区域四楼结构--------------------------------------- -->
      <div class="f4">
        <div class="center">
          <div class="box">
            <div class="text">
              <h2>iPadOS 16</h2>
              <p>满手高招，满满 iPad 范。</p>
              <a href="#">先赌为快 > </a>
            </div>
            <div class="img">
              <img :src="data.img16" />
            </div>
          </div>
        </div>
      </div>
      <!-----------------------------小图区域五楼结构  ------------------------------------------>
      <div class="f5">
        <div class="center">
          <div class="box">
            <div class="box1">
              <img :src="data.img28" />
              <div>
                <h2>免费送货</h2>
                <p>享受送货上门服务，或前往 Apple Store 零售店提取现货。</p>
                <a href="#">进一条了解 ></a>
              </div>
            </div>
            <div class="box2">
              <img :src="data.img29" />
              <div>
                <h2>分期付款</h2>
                <p>符合条件的用户 可选择灵活的分期付款方式。</p>
                <a href="#">进一条了解 ></a>
              </div>
            </div>
            <div class="box2">
              <img :src="data.img30" />
              <div>
                <h2>个性化镌刻服务</h2>
                <p>
                  无论是你的名字，还是你想说的话， 都能免费帮你刻在 iPad 上。
                  Apple 独家福利。
                </p>
                <a href="#">进一条了解 ></a>
              </div>
            </div>
          </div>
          <div class="text">
            <h2>iPad 绝妙搭档</h2>
          </div>
        </div>
      </div>
      <!-----------------------------小图区域六楼结构  ------------------------------------------>
      <div class="f6">
        <div class="center">
          <div class="box">
            <div class="box1">
              <div class="text">
                <h2>Apple Pencil</h2>
                <p>随心想起，随笔记下。</p>
                <a href="#">选购 ></a> <a href="">进一步了解 ></a>
              </div>
              <div>
                <img :src="data.img17" />
              </div>
            </div>
            <div class="box2">
              <div>
                <img :src="data.img18" />
              </div>
              <div class="text">
                <h2>适用于 iPad 的键盘</h2>
                <p>款款键盘，保护面面俱到。</p>
                <a href="#">选购 ></a> <a href="">进一步了解 ></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- -----------------------------------------------小图区域七楼结构 ------------------------------------------------ -->
      <div class="f7">
        <div class="center">
          <div class="box1">
            <div class="text">
              <h2>配件</h2>
              <p>
                来看看各款保护壳、保护盖、键盘、Apple Pencil、AirPods
                等精彩配件。
              </p>
              <a href="#">选购 iPad 配件 > </a>
            </div>
            <div class="img">
              <img :src="data.img19" />
            </div>
          </div>
          <div class="box2">
            <p>为什么 iPad 就是那么不一样？</p>
          </div>
        </div>
      </div>
      <!-- -----------------------------------------------小图区域八楼结构 ------------------------------------------------ -->
      <div class="f8">
        <div class="center">
          <div class="box">
            <div class="box1">
              <div class="text">
                <h2>选 iPad 的理由</h2>
                <p>做什么都好，什么都做得好。</p>
                <a href="#">进一步了解 > </a>
              </div>
              <div class="img">
                <img :src="data.img20" />
              </div>
            </div>
            <div
              class="box2"
              :style="{ backgroundImage: `url(${data.img21})` }"
            >
              <div class="text">
                <h2>iPadOS 15</h2>
                <p>超得力，不费力。</p>
                <a href="">进一步了解 ></a>
              </div>
            </div>
            <div class="box3">
              <div class="box3-1">
                <div class="text">
                  <h2>iCloud</h2>
                  <p>给你一个好地方，来保存照片、文件等资料。</p>
                  <a href="">进一步了解 ></a>
                </div>
                <div>
                  <img :src="data.img22" />
                </div>
              </div>
              <div class="box3-2">
                <div class="text">
                  <img :src="data.img31" />
                  <p>免现支付，就该如此便捷。</p>
                  <a href="">进一步了解 ></a>
                </div>
                <div>
                  <img :src="data.img23" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!----------------------------------------------- 小图区域九楼结构 -------------------------------->
      <div class="f9">
        <div class="center">
          <div class="text1">
            <p>尽享 iPad 的精彩</p>
          </div>
          <div class="box">
            <div class="box1">
              <div class="text">
                <h1>Today at Apple</h1>
                <h2>实时在线课程</h2>
                <p>iPad 基础入门，跟着我们学起来。</p>
                <a href="#">注册 > </a>
              </div>
              <div class="img">
                <img :src="data.img24" />
              </div>
            </div>
            <div class="box2">
              <div
                class="box2-1"
                :style="{ backgroundImage: `url(${data.img25})` }"
              >
                <div class="text">
                  <h2>Apple 与教育</h2>
                  <p>为教育工作者和学生提供支持， 给他们推动世界前行的力量。</p>
                  <a href="">进一步了解 ></a>
                </div>
              </div>
              <div
                class="box2-2"
                :style="{ backgroundImage: `url(${data.img25})` }"
              >
                <div class="text">
                  <h2>Apple at Work</h2>
                  <a href="">进一步了解 ></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import IpadZu from "@/components/IpadZu.vue";
export default {
  components: { IpadZu },
  data() {
    return {
      data: null,
      swiperOption: {
        // swiper提供的选项--可选的配置项
        // effect:特效
        effect: "coverflow",
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        //autoplay:true,//默认的滚动设定
        //自定义设定
        speed: 1000,
        autoplay: {
          delay: 3000, //间隔时间 单位毫秒
          //用户操作后,是否停止自动滚动
          disableOnInteraction: false,
        },
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    stopPlay() {
      // console.log("鼠标进入,停止播放");
      // console.log(this.$refs);
      this.$refs.swiper.$swiper.autoplay.stop();
    },
    startPlay() {
      // console.log("鼠标离开,开始播放");
      this.$refs.swiper.$swiper.autoplay.start();
    },
    getData() {
      let url = "http://localhost:3000/ipadImg/1";
      axios.get(url).then(res => {
        console.log(res);
        this.data = res.data;
      });
    },
    showMask(i) {
      // console.log(this.data.bigImg[i-1].bigimg);
      mask1.style = "display:block";
      maskImg.src = this.data.bigImg[i - 1].bigimg;
    },
    closeMask() {
      mask1.style = "display:none";
    },
  },
};
</script>

<style lang="less" scoped>
#ipad {
  width: 100%;
  height: 100%;
  background-color: #f5f5f7;
  overflow: hidden;
}
.swiper-container {
  width: 920px;
  margin: 10px auto;
  position: relative;
}
.swiper-button-next {
  color: gray;
}
.swiper-button-prev {
  color: gray;
}
.swiper-slide-first {
  background-color: #f5f5f7;
}
.swiper-first {
  width: 920px;
  height: 600px;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f7;
  position: absolute;
  left: 0;
}
.swiper-first > img {
  width: 450px;
  height: 467px;
  display: block;
}

.swiper-first .text h2 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 5px;
}
.swiper-first .text .p1 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 20px;
}
.swiper-first .text > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style scoped src="../assets/css/ipad.css"></style>
